<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="_token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/assets/css/layui.css">
    <link rel="stylesheet" href="/assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
    <style type="text/css">
    .layui-table-cell img{
      width:40px;
      height:30px;
    }
    </style>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-page-header">
            <div class="pagewrap">
              <a class="layui-btn layui-btn-blue layui-btn-sm" title="刷新当前页" href="javascript:void(0);" onclick="layer.load(1);window.location.reload(true);"><i class="layui-icon"></i>刷新</a>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="form-box">
                        <div class="layui-form layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">关键词:</div>
                                <div class="layui-input-inline" style="width: 200px;">
                                  <input type="text" placeholder="昵称/课程/老师" id="key" name="key" value="" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">付款:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <select name="state">
                                        <option value="0">全部</option>
                                        <option value="1">待付款</option>
                                        <option value="2">已付款</option>
                                    </select>     
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="开始时间" name="start_time" id="start_time">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="display: inline;">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="结束时间" name="end_time" id="end_time">
                                </div>

                                <button style="height:38px;line-height:38px;float:left;" class="layui-btn layui-btn-blue layui-btn-sm" id="searchBtn">搜索</button>
                            </div>
                        </div>
                        <table id="demo" lay-filter="dataTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/assets/layui.all.js"></script>
    <script>
      var element = layui.element;
      var table = layui.table;
      var form = layui.form;
      var $=layui.jquery;
      var laydate = layui.laydate;
      var key = $("#key").val()
      var sex=$("select[name=sex]").val();
      var start_time = $("#start_time").val()
      var end_time = $("#end_time").val();

      //日期时间选择器
      laydate.render({
          elem: '#start_time'
          ,type: 'datetime'
      });
      laydate.render({
          elem: '#end_time'
          ,type: 'datetime'
      });
      
      //展示已知数据
      var dataTable =table.render({
        elem: '#demo'
        ,url: "{{ route('admin.odata') }}" //数据接口
        ,request: {
          pageName: 'page' //页码的参数名称，默认：page
          ,limitName: 'limit' //每页数据量的参数名，默认：limit
        }
        ,where: {start_time:start_time,end_time:end_time,key:key,sex:sex}
        ,cols: [[ //标题栏
          {field: 'id', title: 'ID', width: 80}
          ,{field: 'avatar', title: '头像', width: 100,align:'center',templet:'<div><img src="@{{d.avatar}}"></div>'}
          ,{field: 'nickname', title: '昵称', minWidth: 180}
          ,{field: 'time', title: '时间', width: 180, align:'center'}
        ]]
        ,skin: 'line' //表格风格
        ,even: true
        ,page: true //是否显示分页
      });

      $("#searchBtn").click(function () {
          start_time = $("#start_time").val()
          end_time = $("#end_time").val();
          key = $("#key").val()
          sex=$("select[name=sex]").val();
          dataTable.reload({
              where:{start_time:start_time,end_time:end_time,key:key,sex:sex},
              page:{page:1}
          })
      });
      laydate.render({
          elem: "#start_time",
      });
      laydate.render({
          elem: "#end_time",
      });
    </script>
</body>
</html>